<template>
  <div class="cors-test">
    <h2>CORS测试组件</h2>
    <div class="test-actions">
      <el-button type="primary" @click="testGet" :loading="loading">测试GET请求</el-button>
      <el-button type="success" @click="testPost" :loading="loading">测试POST请求</el-button>
      <el-button type="warning" @click="testLogin" :loading="loading">测试登录请求</el-button>
    </div>
    
    <div v-if="result" class="result-box">
      <h3>测试结果:</h3>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
    
    <div v-if="error" class="error-box">
      <h3>错误信息:</h3>
      <pre>{{ error }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'CorsTest',
  data() {
    return {
      loading: false,
      result: null,
      error: null
    };
  },
  methods: {
    async testGet() {
      this.loading = true;
      this.result = null;
      this.error = null;
      
      try {
        const response = await axios.get('http://localhost:8080/api/test/hello');
        this.result = response.data;
      } catch (err) {
        console.error('测试GET请求失败:', err);
        this.error = err.message;
        if (err.response) {
          this.error += ' - ' + JSON.stringify(err.response.data);
        }
      } finally {
        this.loading = false;
      }
    },
    
    async testPost() {
      this.loading = true;
      this.result = null;
      this.error = null;
      
      try {
        const response = await axios.post('http://localhost:8080/api/test/echo', {
          message: '测试数据',
          timestamp: new Date().toISOString()
        });
        this.result = response.data;
      } catch (err) {
        console.error('测试POST请求失败:', err);
        this.error = err.message;
        if (err.response) {
          this.error += ' - ' + JSON.stringify(err.response.data);
        }
      } finally {
        this.loading = false;
      }
    },
    
    async testLogin() {
      this.loading = true;
      this.result = null;
      this.error = null;
      
      try {
        const response = await axios.post('http://localhost:8080/api/users/login', {
          username: 'admin',
          password: 'admin123'
        });
        this.result = response.data;
      } catch (err) {
        console.error('测试登录请求失败:', err);
        this.error = err.message;
        if (err.response) {
          this.error += ' - ' + JSON.stringify(err.response.data);
        }
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.cors-test {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
}

.test-actions {
  margin: 20px 0;
}

.test-actions button {
  margin-right: 10px;
}

.result-box, .error-box {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
}

.result-box {
  background-color: #f0f7ff;
  border: 1px solid #c0d8ff;
}

.error-box {
  background-color: #fff0f0;
  border: 1px solid #ffc0c0;
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
  background-color: rgba(0, 0, 0, 0.03);
  padding: 10px;
  border-radius: 4px;
}
</style> 